<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style>
  * {
      margin: 0;
      padding: 0;
  }
  .box {
      width: 400px;
  }
    .tabb {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: red;
    }

    .box .tabContent {
        width: 100%;
        text-align: center;
    }



    .tabb .item {
        flex: 1;
        text-align: center;
        height: 100%;
    }

    .item:hover {
        background-color: green;
    }

    .tabb .active {
        width: 100px;
        text-align: center;
        border: 1px solid gray;
        background-color: yellow;
        color: orange;
    }
</style>
<body>
    <script>
        window.onload = function () {
            let app = new Vue({
                el: '#app',
                data: {
                    tabb: ['选项卡1', '选项卡2', '选项卡3', '选项卡4'],
                    selectedTab: 0
                },
                methods: {
                    selected(index) {
                        this.selectedTab = index;
                    }
                }

            });
        }
    </script>

    <div id="app">
        <div class="box">
            <div class="tabb">
                <div class="item" v-for="(item, index) in tabb" :class="{ active: selectedTab === index }"
                    @click="selected(index)">
                    {{item}}
                </div>
            </div>
            <div class="tabContent">
                <div v-if="selectedTab === 0">1</div>
                <div v-if="selectedTab === 1">2</div>
                <div v-if="selectedTab === 2">3</div>
                <div v-if="selectedTab === 3">4</div>
            </div>
        </div>
    </div>
</body>
</html>
